<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>材料签收</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../resources/css/style.css">
    <style>
        .details ul li {width: 50%;float: left;}
        .layui-table thead th{text-align: left;}
        thead tr th:before {content: "● "; color: #e3e3e3; font-size: 12px;}
        .layui-table td{text-indent: 1rem; font-size: 12px; color: #333;}
        @media screen and (max-width: 750px) {
            .detaileds{width: 100%;overflow-x: auto;}
            .detaileds table{width: 200%!important;overflow-x: auto;}
            .detaL{width: 30%;padding: 0;}
            .dataR{width: 70%;}
            .details ul li{ width: 100%; float: left;margin-right: 5px;}
            .details ul{margin-top: 0;}
            thead tr th:before{content: '';}
            .checkboxs{text-indent: 0!important;}
            ._nums{width: 80px;}
            .tijiao{position: absolute;top: 0;right: 0; background-color: transparent;border: 0;font-size: 20px;
                height: 45px; line-height: 45px;margin-right: 15px!important;color: #FFF;}
            .recvNameL{width: 40%;display: inline-block;}
            .recvNameR{width: 50%;display: inline-block;}
            .recvName p ,.recvName_Opinion p{text-align: center;}
        }

    </style>
</head>
<body>

<div class="_MOVE">
    <form class="layui-form layui-form-pane" action="" >

    <div class="MOVE_title">
        <div class="site-tree-mobile layui-show houtui" onclick="history.back(-1);">
            <i class="layui-icon">&#xe603;</i>
        </div>
        <span class="zhanwei"></span>
        <p class="MOVE_biaoti">材料签收</p>
        <span class="shousuo"><button class="layui-btn layui-btn-sm layui-btn-disabled tijiao" lay-submit lay-filter="_subm" style="margin-right: 50px; background-color: transparent;font-size: 20px;">发货</button></span>

    </div>

    <div class="MOVE_main">
        <!--id="LAY_demo1"-->
            <div class="engineering"><!--工程信息-->
                <div class="titles">郑州建材有限公司</div>
                <div class="details">

                </div>

                <div class="detailed">      <!--材料明细-->
                    <div class="detaileds">
                        <table class="layui-table">

                            <thead>
                            <tr>
                                <th><input type="checkbox" name="like1[write]" lay-filter="allChoose" lay-skin="primary" title='' ></th>
                                <th>供料单号</th>
                                <th>材料名称</th>
                                <th>材料规格</th>
                                <th>数量</th>
                                <th>签收数量</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--<tr>-->
                            <!--<td>三级钢</td>-->
                            <!--<td>28</td>-->
                            <!--<td>t</td>-->
                            <!--<td>t</td>-->
                            <!--<td><input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></td>-->

                            <!--</tr>-->

                            </tbody>
                        </table>
                    </div>
                    <div class="recvName">
                        <p><span class="recvNameL">收料单位及经手人:</span><span class="recvNameR"><input type="text" name="recvName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input"></span></p>
                    </div>
                    <div class="recvName_Opinion">
                        <p><span class="recvNameL">收料单位及经手人意见:</span><span class="recvNameR"><input type="text" name="recvName_Opinion" placeholder="请输入" autocomplete="off" class="layui-input"></span></p>
                    </div>
                </div>
            </div>
        </div>
    </form>

</div>



<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
<script src="../../../resources/js/style.js"></script>
<script src="../../../resources/js/api.js"></script>

<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date1'      //开始时间
        });
        laydate.render({
            elem: '#date2'  //结束时间
        });

        var M_data=sessionStorage.data_material;
        M_data=JSON.parse(M_data);                                      //JSON字符串转对象
        var Mdata=M_data.data;
        $('.titles').text(Mdata.compName);
        $('.details').append(' <ul>\n' +
            '                    <li><span class="detaL">项目名称：</span><span class="dataR"> '+Mdata.eppName+Mdata.eppStaEnd+' </span></li>\n' +
            '                    <li><span class="detaL">供货单创建时间：</span><span class="dataR">'+Mdata.rm_Time+'</span></li>\n' +
            '                    <li><span class="detaL">起止点：</span><span class="dataR">'+Mdata.eppStaEnd+'</span></li>\n' +
            '                    <li><span class="detaL">供货单单号：</span><span class="dataR rm_Code">'+Mdata.rm_Code+'</span></li>\n' +
            '                    <li><span class="detaL">收货地址：</span><span class="dataR">'+Mdata.r_adr+'</span></li>\n' +
            '                    <li><span class="detaL">施工单位：</span><span class="dataR">'+Mdata.compCode1+'</span></li>\n' +
            '                    <li><span class="detaL">供货商：</span><span class="dataR">'+Mdata.supName+'</span></li>\n' +
            '                  \n' +
            '                </ul>')

        //监听全选
        form.on('checkbox(allChoose)', function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]');         //找到tbody下的所有多选框
            child.each(function(index, item){                             //循环每个参数item  每个多选框
                item.checked = data.elem.checked;                         //所有多选框  选中或取消选中
//                $(item).trigger('click');
            });
            form.render('checkbox');                                      //局部刷新多选框  保持页面操作一致性
        });
        //监听单个点击多选
        form.on('checkbox(filter)', function(data){
            console.log(data.elem); //得到checkbox原始DOM对象
            console.log(data.elem.checked); //是否被选中，true或者false
            console.log(data.value); //复选框value值，也可以通过data.elem.value得到
            console.log(data.othis); //得到美化后的DOM对象
            var _this=data.othis;
            var chuandi=new Object();
            chuandi.jia=$(_this).parents('tr').attr('idang');
            chuandi.id=$(_this).parents('tr').attr('id');
            chuandi.mat_id=$(_this).parents('tr').attr('mat_id');
            chuandi.names=_this.parents('th').next().text();
            chuandi.guige=_this.parents('th').next().next().text();
            chuandi.num=_this.parents('th').next().next().next().text();
            console.log(chuandi)
            $('.tijiao').removeClass('layui-btn-disabled');



//            console.log($(data.elem).parent(), 'is i======================== parent =')

            if(data.elem.checked){          //如果多选框被选中  给下半部添加内容
                $('.beixuan table tbody').append('<tr id="'+chuandi.id+'" mat_id="'+chuandi.mat_id+'" idang="'+chuandi.jia+'">\n' +
                    '                                    <th class="names">'+chuandi.names+'</th>\n' +
                    '                                    <th class="guige">'+chuandi.guige+'</th>\n' +
                    '                                    <th class="nums">\n' +
                    '                                        <input type="number" class="inputs" lay-verify="required" value="'+chuandi.num+'"/>\n' +
                    '                                        <input type="hidden" class="numson" lay-verify="required" value="'+chuandi.num+'"/>\n' +
                    '                                    </th>\n' +
                    '                                </tr>')
            }else{                          //否则循环下半部所有的tr删除对应的tr
                $('.beixuan table tbody tr').each(function () {
                    if($(this).attr('id')==chuandi.id){
                        $(this).remove();
                    }

                })

            }



        });
        //提交监听
        form.on('submit(_subm)', function(data) {
            console.log(data)
            var canshu='';
            $('.detaileds tbody tr').each(function () {
                var xuanzhong=$(this).children('.checkboxs').children('.checks');		//获取复选框
                //如果复选框被选中就执行

                if(xuanzhong.is(':checked')){
                    canshu+=$(this).attr('ids')+','+$(this).children('._nums').children('input').val()+'|';

                }

            })
            canshu=canshu.substring(0,canshu.length-1);
            console.log(canshu)
            data.field.rm_code=$('.rm_Code').text();
            data.field.recvName=$('[name="recvName"]').val();
            data.field.recvName_Opinion=$('[name="recvName_Opinion"]').val();
            data.field.sd=canshu;
            data.field.p=getCookie('yanzheng');
            console.log(data.field,'>>>>>>>>>>>>>>>>>>')
            tiaoAlertAjax('/api/ctteam/matSign.do', data.field, '.tijiao');

            return false;
        })



        ajaxs('/api/ctteam/matSignDetails.do','post',{'type':'c','rm_code':Mdata.rm_Code,'p':getCookie('yanzheng')},function
            (data) {
            console.log(data)
            var datas=data.data;
            for(var i=0;i<datas.length;i++){
                $('.layui-table tbody').append(' <tr ids="'+datas[i].id+'">\n' +
                    '                            <td class="checkboxs"><input type="checkbox" name="like1[write]"            lay-filter="filter"    lay-skin="primary" title=\'\' class="checks"></td>\n' +
                    '                            <td>'+datas[i].rm_Code+'</td>\n' +
                    '                            <td>'+datas[i].mat_Name+'</td>\n' +
                    '                            <td>'+datas[i].mat_Spec+'</td>\n' +
                    '                            <td>'+datas[i].fin_Num+'</td>\n' +
                    '                            <td class="_nums"><input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" value="'+datas[i].fin_Num+'"></td>\n' +
                    '\n' +
                    '                            </tr>');

            }
            form.render();

        })


    })

</script>
</body>
</html>